<template>
	<view class="page">
		<mescroll-uni ref="mescrollRef" height="100%" top="0" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback"
		 @up="upCallback">
		<view class="account_top">
			<view class="account_top_cash">
				<view class="title">
					可提现(元)：
				</view>
				<view class="cash">
					21602
				</view>
				<view class="account_btn">
					提现
				</view>
			</view>
			<view class="account_top_freeze">
				冻结中(元)：<text>1854.32</text>
			</view>
		</view>
		<view class="account_main">
			<view class="account_mian_tab">
				<view class="tab_tit active">收益记录</view>
				<view class="tab_tit">提现明细</view>
			</view>
			<view class="account_main_container">
				<view class="account_item clearfix">
					<view class="account_item_left">
						<view class="title">佣金</view>
						<view class="time">2020-07-01 18:56:30</view>
					</view>
					<view class="account_item_right vCenter">+68</view>
				</view>
				<view class="account_item clearfix">
					<view class="account_item_left">
						<view class="title">佣金</view>
						<view class="time">2020-07-01 18:56:30</view>
					</view>
					<view class="account_item_right vCenter">+68</view>
				</view>
				<view class="account_item clearfix">
					<view class="account_item_left">
						<view class="title">佣金</view>
						<view class="time">2020-07-01 18:56:30</view>
					</view>
					<view class="account_item_right vCenter">+68</view>
				</view>
				<view class="account_item clearfix">
					<view class="account_item_left">
						<view class="title">佣金</view>
						<view class="time">2020-07-01 18:56:30</view>
					</view>
					<view class="account_item_right vCenter">+68</view>
				</view>
				<view class="account_item clearfix">
					<view class="account_item_left">
						<view class="title">佣金</view>
						<view class="time">2020-07-01 18:56:30</view>
					</view>
					<view class="account_item_right vCenter">+68</view>
				</view>
				<view class="account_item clearfix">
					<view class="account_item_left">
						<view class="title">佣金</view>
						<view class="time">2020-07-01 18:56:30</view>
					</view>
					<view class="account_item_right vCenter">+68</view>
				</view>
			</view>
		</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		data() {
			return {
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					auto: true, //是否在初始化后,自动执行downCallback; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 30, // 每页数据的数量
						time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
					}
				}
			}
		},
		methods: {
			downCallback() {
				//联网加载数据
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				// let params = {
				// 	page_size: page.size,
				// 	page: page.num,
				// 	random_str: this.$dokey.getRandom(),
				// 	timestamp: this.$dokey.getTime(),
				// 	method: 'website.mould.log.list',
				// 	sign: this.$md5(this.$dokey.secretdate('website.mould.log.list'))
				// }
				// requestAll(params).then(resp => {
				// 	if (resp.code == 1) {
				// 		let data = resp.response_data
				// 		if (page.num == 1) this.dataArray = []; //如果是第一页需手动制空列表
				// 		this.dataArray = this.dataArray.concat(data.list); //追加新数据
				// 		if (page.num == 1) this.previewList = []
				// 		this.previewList = this.previewList.concat(data.list);
				// 		this.pageTotal = data.total_page
				// 		this.mescroll.endByPage(data.list.length, this.pageTotal);
				// 	}
				// }).catch(() => {
				// 	//联网失败, 结束加载
				// 	this.mescroll.endErr();
				// })
			},
		}
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.account_top {
		padding: 0 33rpx;
		border-bottom: 25rpx solid #F4F4F4;
		.account_top_cash {
			position: relative;
			padding: 23rpx 0 33rpx;
			border-bottom: 1px solid #E2E2E2;
			.title {
				margin-bottom: 33rpx;
				line-height: 100%;
				color: #B3B3B3;
				font-size: 26rpx;
			}
			.cash {
				line-height: 100%;
				color: #368AFF;
				font-size: 50rpx;
			}
			.account_btn {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				width:188rpx;
				height:78rpx;
				line-height: 76rpx;
				background:rgba(54,138,255,1);
				border-radius:45rpx;
				text-align: center;
				font-size:40rpx;
				color: #fff;
			}
		}
		.account_top_freeze {
			padding: 39rpx 0 33rpx;
			line-height: 100%;
			font-size: 26rpx;
			color: #B3B3B3;
			text {
				font-size: 36rpx;
				color: #565656;
			}
		}
	}
	.account_main {
		.account_mian_tab {
			position: sticky;
			display: flex;
			width:100%;
			height:117rpx;
			line-height: 117rpx;
			background:rgba(255,255,255,1);
			border-bottom: 1px solid #E2E2E2;
			.tab_tit {
				flex: 1;
				font-size: 36rpx;
				color: #565656;
				text-align: center;
				&.active {
					color: #368AFF;
				}
			}
		}
	}
	.account_main_container {
		padding: 0 33rpx;
		.account_item {
			padding: 33rpx 0;
			border-bottom: 1px solid #E2E2E2;
			.account_item_left {
				float: left;
				.title {
					margin-bottom: 13rpx;
					line-height: 100%;
					font-size: 32rpx;
					color: #565656;
				}
				.time {
					line-height: 100%;
					font-size: 32rpx;
					color: #565656;
				}
			}
			.account_item_right {
				float: right;
				height: 100%;
				font-size: 50rpx;
				color: #368AFF;
			}
		}
	}
</style>
